<template>
  <IBizRow :class="classArr" :layout="modelData.layout">
    <!-- TODO 视图头部返回组件 -->
    <!-- <iBizPresetViewBack :view="view"></iBizPresetViewBack> -->
    <template v-for="(slotKey, index) in Object.keys($slots)" :key="slotKey">
      <IBizCol
        :class="calcColClass(index)"
        :layoutPos="modelData.layoutPos"
        :state="controller.state"
      >
        <slot :name="slotKey"></slot>
      </IBizCol>
    </template>
  </IBizRow>
</template>
<script setup lang="ts">
import { IPanelContainer } from '@ibiz/model-core'
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useViewStack } from './utils'
import { useNamespace } from '@/use'
import { PanelContainerController } from '../panel-container/i-biz-panel-container.controller'

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: PanelContainerController,
    required: true,
  },
})

const ns = useNamespace('view-header')
const route = useRoute()
const { viewStack } = useViewStack()
const backButtonVisible = ref(false)
const initButtonVisible = () => {
  if (
    (props.controller.panel.view.modal.viewUsage === 1 &&
      viewStack.cacheKeys.length > 1 &&
      route.meta.home) ||
    props.controller.panel.view.modal.viewUsage === 2
  ) {
    backButtonVisible.value = true
  }
}
initButtonVisible()
const view = props.controller.panel.view
// 嵌入视图模式判断 暂时注释
// const isEmbed = view.modal.mode === ViewMode.EMBED || view.modal.routeDepth! > 2;
const { id } = props.modelData
const classArr = computed(() => {
  let result: Array<string | false> = [ns.b(), ns.m(id)]
  result = [
    ...result,
    ...props.controller.containerClass,
    ns.is('hidden', !props.controller.state.visible),
  ]
  return result
})

const calcColClass = (index: number) => {
  return { [ns.b('precut-back')]: index === 0 && backButtonVisible.value }
}
</script>
<style lang="scss">
@import './i-biz-view-header-panel-container';
</style>
